<template>
  <div class="home">
    <zf-form :model="model" :rules="rules" ref="submitForm">
      <zf-form-item label="用户名" props="username">
        <zf-input
          v-model="model.username"
          placeholder="请输入用户名"
        ></zf-input>
      </zf-form-item>
      <zf-form-item label="密码" props="password">
        <zf-input
          type="password"
          v-model="model.password"
          placeholder="请输入密码"
        ></zf-input>
      </zf-form-item>
      <zf-form-item>
        <button @click="sendData">提交</button>
      </zf-form-item>
    </zf-form>
  </div>
</template>

<script>
import zfForm from "@/components/zf-form.vue";
import zfFormItem from "@/components/zf-form-item.vue";
import zfInput from "@/components/zf-input.vue";

// import Parent from '@/components/parent.vue'

export default {
  name: "Home",
  components: {
    zfForm,
    zfFormItem,
    zfInput,
    // Parent,
  },
  data() {
    return {
      model: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    sendData() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
